<script setup lang="ts">
/**
 * @propertyicon - 顶部图片 url
 * @propertytitle - modal 的标题
 * @propertycontent - modal 的内容，默认为空
 * @propertybuttonLabel - 底部按钮的文字内容
 */
interface JZTModalProps {
  icon?: string
  title?: string
  content?: string
  buttonLabel?: string
}

const props = withDefaults(defineProps<JZTModalProps>(), {
  title: '提示',
  buttonLabel: '确定',
})

defineEmits(['confirm'])
</script>

<template>
  <view
    class="absolute top-50% left-50% -translate-50% w-690rpx rounded-30rpx"
    :style="{ background: 'linear-gradient(180deg, #FFEFE3 0%, #FFFFFF 36%)' }"
  >
    <image class="absolute -top-40rpx x-center w-161rpx h-157rpx" :src="props.icon" />
    <slot>
      <Spacer height="146" />
      <view class="text-34rpx leading-34rpx font-bold text-primary text-center mx-auto">
        {{ props.title }}
      </view>
      <Spacer height="40" />
      <view class="w-390rpx text-28rpx leading-38rpx text-secondary text-center mx-auto">
        {{ props.content }}
      </view>
      <Spacer height="52" />
      <RGButton width="422" @tap="$emit('confirm')">
        {{ props.buttonLabel }}
      </RGButton>
      <Spacer height="100" />
    </slot>
  </view>
</template>
